<template>
    <div>
        <el-card style="margin-bottom: 20px;">
            <div slot="header" class="clearfix">
                <span>基础数据</span>
                <el-tooltip class="item" effect="dark" content="当前账户基础信息" placement="right-start">
                    <Icon type="ios-information-circle-outline" style="font-size: 16px"/>
                </el-tooltip>
            </div>
            <div class="ly-card">
                <el-row>
                    <el-col :span="8">
                        <el-card shadow="hover">
                            <!--<router-link to="/baseinfo/company">-->
                            <div class="card-title">
                                <Icon type="ios-home" style="background: #2fb2f0;"/>
                                <em>小区</em>
                                <span>{{infoDate.houses|| '--'}}个</span>
                            </div>
                            <div class="card-other">
                                <router-link to="/baseinfo/houseList">
                                    <span>添加小区</span>
                                </router-link>
                            </div>
                            <!--</router-link>-->
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover">
                            <div class="card-title">
                                <Icon type="md-home" style="background: #ff6066;"/>
                                <em>房屋</em>
                                <span>{{infoDate.rooms|| '--'}}个</span>
                            </div>
                            <div class="card-other">
                                <router-link to="/baseinfo/roomList">
                                    <span>添加房屋</span>
                                </router-link>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" style=" border-right: 1px solid #e5e5e5;">
                            <div class="card-title">
                                <Icon type="ios-contacts" style="background: #44c8a9;"/>
                                <em>住户</em>
                                <span>{{infoDate.owners|| '--'}}个</span>
                            </div>
                            <div class="card-other">
                                <router-link to="/baseinfo/ownerList">
                                    <span>添加住户</span>
                                </router-link>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-card shadow="hover">
                            <div class="card-title">
                                <Icon type="logo-usd" style="background: #ff6066;"/>
                                <em>未交费用</em>
                                <span>{{infoDate.unpaid|| '--'}}元</span>
                            </div>
                            <div class="card-other">
                                <router-link to="/cost/noBill">
                                    <span>导入账单</span>
                                </router-link>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover">
                            <div class="card-title">
                                <Icon type="logo-bitcoin" style="background: #42c9a9;"/>
                                <em>已交费用</em>
                                <span>{{infoDate.paid|| '--'}}元</span>
                            </div>
                            <div class="card-other">
                                <router-link to="/cost/alreadyBill">
                                    <span>导出账单</span>
                                </router-link>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" style=" border-right: 1px solid #e5e5e5;">
                            <div class="card-title">
                                <Icon type="ios-car" style="background: #2fb2f0;"/>
                                <em>车辆</em>
                                <span>{{infoDate.cars|| '--'}}个</span>
                            </div>
                            <div class="card-other">
                                <router-link to="/parking/parkingList">
                                    <span>添加车辆</span>
                                </router-link>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </el-card>
        <el-row :gutter="20"  v-show="emptyEcharts">
            <el-col :span="8">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>支付渠道</span>
                    </div>
                    <div id="moneyPie" style="width: 100%;height: 350px;"></div>
                </el-card>
            </el-col>
            <el-col :span="16">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>费用类型</span>
                        <div class="card-title" style="float: right; padding: 3px 0">
                            小区
                            <el-select v-model="moneySearch.housingId" placeholder="请选择小区" @change="housechange"
                                       no-data-text="暂无数据" size="mini">
                                <el-option v-for="item in houseList" :value="item.id" :key="item.id"
                                           :label="item.name"></el-option>
                            </el-select>
                            账期
                            <el-select v-model="moneySearch.period" placeholder="请选择账期"
                                       no-data-text="暂无数据" @change="periodchange" size="mini">
                                <el-option value="" label="全部" aria-selected="true">全部</el-option>
                                <el-option v-for="item in periodList" :value="item" :key="item" :label="item">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div id="moneyLine" style="width: 100%;height: 350px;"></div>
                </el-card>
            </el-col>
        </el-row>

        <el-card style="margin-top: 20px;">
            <div slot="header" class="clearfix">
                <span>最近缴费金额</span>
                <div class="card-title">
                    小区
                    <el-select v-model="daysSearch.housingId" placeholder="请选择小区" @change="daysHouseChange"
                               no-data-text="暂无数据" size="mini">
                        <el-option value="0" label="全部" aria-selected="true">全部</el-option>
                        <el-option v-for="item in houseList" :value="item.id" :key="item.id"
                                   :label="item.name"></el-option>
                    </el-select>
                    周期
                    <el-select v-model="daysSearch.showDays" placeholder="请选择日期" @change="dayschange" size="mini">
                        <el-option value="7" label="一周" aria-selected="true"></el-option>
                        <el-option value="15" label="半月" aria-selected="true"></el-option>
                        <el-option value="30" label="一个月" aria-selected="true"></el-option>
                    </el-select>
                </div>
            </div>
            <div id="dayLine" style="width: 100%;height: 350px;"></div>
        </el-card>
    </div>
</template>

<script>
    import echarts from 'echarts'

    export default {
        data() {
            return {
                infoDate: {},
                moneyPie: null,
                pieMoneyData: [],
                moneyLine: null,
                lineMoneyData: [],
                moneySearch: {
                    housingId: '',
                    period: ''
                },
                houseList: [],
                periodList: [],
                dayLine: null,
                lineDayData: [],
                daysSearch: {
                    housingId: '0',
                    showDays: '7',
                },
                emptyEcharts: true,
            }
        },
        mounted() {
            this.loadInfoDate();
            this.loadMoneyPie();
            this.loadMoneyLine();
            this.loadDayLine();
        },
        created: function () {
            this.gethouse();
        },
        methods: {
            //加载小区
            gethouse: function () {
                this.postRequest("/api/housing/getHousingByLogin").then(res => {
                    if (res.length <= 0) {
                        return
                    } else {
                        this.houseList = res;
                        this.moneySearch.housingId = res[0].id;
                        this.housechange(this.moneySearch.housingId);
                    }
                });
            },
            housechange: function (value) {
                this.getCostType(value);
                this.loadMoneyLine();
            },
            periodchange: function () {
                this.loadMoneyLine();
            },
            daysHouseChange: function () {
                this.loadDayLine()
            },
            dayschange: function () {
                this.loadDayLine()
            },
            getCostType: function (value) {
                this.getRequest("/api/collect/getAccountPeriod?payStatus=2&housingId=" + value).then(res => {
                    if (res.code == 20000) {
                        this.periodList = res.data;
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            loadInfoDate: function () {
                this.postRequest("/api/adminIndex/housing").then(res => {
                    if (res.code == 20000) {
                        this.infoDate = res.data;
                    }
                });
            },
            loadMoneyPie: function () {
                this.postRequest("/api/adminIndex/payType").then(res => {
                    // this.tableLoading = false;
                    if (res.code == 20000) {
                        if (res.data.length <= 0) {
                            this.emptyEcharts = false;
                        } else {
                            this.emptyEcharts = true;
                            this.pieMoneyData = res.data;
                            this.drawMoneyPie();
                        }
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            loadMoneyLine: function () {
                const params = {
                    housingId: this.moneySearch.housingId,
                    period: this.moneySearch.period
                }
                this.postRequest("/api/adminIndex/period", params).then(res => {
                    // this.tableLoading = false;
                    if (res.code == 20000) {
                        this.lineMoneyData = res.data;
                        this.drawMoneyLine();
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });

            },
            loadDayLine: function () {
                const params = {
                    housingId: this.daysSearch.housingId,
                    showDays: this.daysSearch.showDays
                }
                this.postRequest("/api/adminIndex/dayIncome", params).then(res => {
                    // this.tableLoading = false;
                    if (res.code == 20000) {
                        this.lineDayData = res.data;
                        this.drawDayLine();
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });

            },
            drawMoneyPie: function () {
                this.moneyPie = echarts.init(document.getElementById("moneyPie"));
                this.moneyPie.setOption({
                    color: ['#39c7c8', '#b6a3dc', '#5eb2ed', '#fdb984', '#d67b81', '#9fe6b8', '#ff9f7f',],
                    title: {
                        text: '已交费用',
                        subtext: '支付方式',
                        x: 'center'
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        data: this.pieMoneyData.map(item => {
                            return item.payWay
                        }),
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    series: [
                        {
                            type: 'pie',
                            radius: '75%',
                            center: ['50%', '60%'],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            },
                            data: this.pieMoneyData.map(item => {
                                return {
                                    name: item.payWay,
                                    value: item.total
                                };
                            }),

                        }
                    ]
                });
            },
            drawMoneyLine: function () {
                this.moneyLine = echarts.init(document.getElementById("moneyLine"));
                this.moneyLine.setOption({
                    color: ['#39c7c8', '#b6a3db'],
                    legend: {
                        data: ['已交', '未交']
                    },
                    calculable: true,
                    xAxis: {
                        type: 'category',
                        data: this.lineMoneyData.map(item => {
                            return item.name;
                        }),
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '已交',
                            data: this.lineMoneyData.map(item => {
                                return item.paid;
                            }),
                            type: 'bar',
                            barWidth: '20%',
                            smooth: true,
                            barGap: 0,
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top',

                                }
                            },
                            areaStyle: {normal: {}},
                        },
                        {
                            name: '未交',
                            data: this.lineMoneyData.map(item => {
                                return item.unpaid;
                            }),
                            type: 'bar',
                            barWidth: '20%',
                            smooth: true,
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top'
                                }
                            },
                            areaStyle: {normal: {}},
                        },
                    ]
                });
            },
            drawDayLine: function () {
                this.dayLine = echarts.init(document.getElementById("dayLine"));
                this.dayLine.setOption({
                    color: ['#39c7c8', '#b6a3db'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: this.lineDayData.map(item => {
                                return item.days;
                            }),
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '收入',
                            type: 'line',
                            smooth: true,
                            data: this.lineDayData.map(item => {
                                return item.total;
                            }),
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top'
                                }
                            },
                        }
                    ]
                });
            },

        },
        destroyed: function () {
            if (this.moneyPie) this.moneyPie.dispose();
            if (this.moneyLine) this.moneyLine.dispose();
        },
    }

</script>

<style lang="less" scoped>
    .ly-center {
        width: 100%;
        height: auto;
        background: #fff;
        padding: 10px;
    }

    .ly-title {
        font-size: 16px;
        color: #262626;
        line-height: 36px;
    }

    .ly-card {
        width: auto;
        height: auto;
        border-top: 1px solid #e5e5e5;
        background: #fff;
        .el-card {
            border: 1px solid #e5e5e5;
            border-right: none;
            border-top: none;
            box-sizing: border-box;
            border-radius: 0;
            cursor: pointer;
            .ivu-icon {
                font-size: 30px;
                color: #fff;
                line-height: 30px;
                border-radius: 99%;
                position: relative;
                top: -2px;
            }
            .card-title {
                width: 100%;
                height: 30px;
                color: #262626;
                font-size: 14px;
                line-height: 30px;
                em {
                    font-style: normal;
                    margin-left: 5px;
                }
                span {
                    float: right;
                }
            }
            .card-other {
                text-align: right;
                color: #8c8c8c;
                font-size: 12px;
            }
        }

    }

    .clearfix {
        position: relative;
        span {
            font-size: 16px;
        }
    }

    .card-title {
        float: right;
        position: relative;
        top: -3px;
        .el-select {
            margin-left: 5px;
        }
    }
</style>
